<template>
    <div
      style="
        width: 100%;
        height: 100vh;
        position: relative;
        overflow: hidden;
        display: flex;
        justify-content: center;
        padding-top: 8px;
      "
    >
      <div
        v-show="IsBottomOver"
        class="TopTopOver"
        style="width: 98%; border-radius: 5px"
      >
        <img :src="LoginUserImg" mode="" />
        <span>Doubt_</span>
      </div>
      <div :class="[Setcontent ? 'setcontent' : 'SetHidecss']">
        <div :class="[Setcontent ? 'setitem' : 'setHideitem']">联系客服</div>
        <div :class="[Setcontent ? 'setitem' : 'setHideitem']">收藏</div>
        <div :class="[Setcontent ? 'setitem' : 'setHideitem']">设置</div>
        <div   :class="[Setcontent ? 'setitem' : 'setHideitem']">
          退出登录
        </div>

        
      </div>
      <div @click="setShow" class="myset">☰</div>
  
      <div @scroll="KKs" class="base" style="width: 98%; border-radius: 5px">
        <!-- 黏性布局 -->
        <!-- <div  v-show="IsBottomOver" class="TopTopOver">
                  <img src="tx5.jpg" mode=""/>
                  <span>Doubt_</span>
              </div> -->
  
        <div @click="setHide" class="content">
          <div ref="mytopimg" class="mytopimg" style="position: relative;">
            <img class="bgcimg" src="bgc6.jpg" mode="" />
            <div style="position: absolute;z-index: 9;bottom: 0px;right: 0px;">
              <img class="myuserImg" :src="LoginUserImg" mode="" />
              <div ref="usercontent" class="usercontent">
                  <div class="usercontentmit">
                  <span style="font-size: 18px; margin-right: 8px; font-weight: 800"
                      >{{LoginUserName}}</span
                  >
                  <span>有始必有终！</span>
                  </div>
                  <div class="usercontentbottom">
                  <div class="usercontentbottom_Age">➹双鱼座</div>
                  <div class="usercontentbottom_Age">{{LoginUserProvice == ''?'未知':LoginUserProvice}}</div>
                  <div class="usercontentbottom_numId">恋颖号: {{ ThisLoginuuId.substring(0,6) }}</div>
                  </div>
              </div>
              </div>
          </div>
  
          <div class="mybottom">
            <!-- <img class="myuserImg" :src="LoginUserImg" mode="" />
            <div ref="usercontent" class="usercontent">
              <div class="usercontentmit">
                <span style="font-size: 18px; margin-right: 8px; font-weight: 800"
                  >{{LoginUserName}}</span
                >
                <span>有始必有终！</span>
              </div>
              <div class="usercontentbottom">
                <div class="usercontentbottom_Age">➹双鱼座</div>
                <div class="usercontentbottom_Age">{{LoginUserProvice == ''?'未知':LoginUserProvice}}</div>
                <div class="usercontentbottom_numId">恋颖号: {{ ThisLoginuuId.substring(0,6) }}</div>
              </div>
            </div> -->
  
            <div class="fenlei"></div>
            <div class="lineset">我的动态</div>
  
            <!-- 我的说说 -->
            <div class="shuoshuoAll">
              
              <div class="journalbox"  v-if="IsShowMain" @click.capture="Global"
              style="padding: 8px;height: calc(100% - 50px);width: 100%;padding-top: 0px;position: relative;">
  
              <div class="sigitembox" :id="item.contentid" :data-contentid="item.contentid"
                  v-for="(item, index) in JournalData" :key="index" style="width: 100%;margin-bottom: 40px;"
                  @mouseenter="IsMoveThisIndex = index" @mouseleave="IsMoveThisIndex = -1">
                  <div style="display: flex;width: 100%;">
                      <img :src="item.userimgurl" alt="" style="width: 40px;height: 40px;border-radius: 5px;">
                      <div style="width: calc(100% - 40px);padding-left: 10px;padding-right: 10px;box-sizing: border-box;">
  
                          <div style="display: flex;justify-content: space-between;height: 40px;margin-bottom: 8px;">
                              <div style="display: flex;flex-direction: column;justify-content: space-between;">
                                  <div style="display: flex;">
                                      <span style="color: black;font-size: 16px;margin: 0;font-weight: 700;">{{ item.username
                                      }}</span>
                                      <span style="margin-right: 4px;
                                                          font-family: KaiTi;
                                                          color: white;
                                                          font-size: 12px;
                                                          padding: 1px 3px;
                                                          margin-left: 3px;
                                                          border-radius: 4px;
                                                          display: flex;
                                                          align-items: center;
                                                          justify-content: center;
                                                          background-color:#eb7651;
                                                        " v-show="item.top == 99">置顶</span>
                                  </div>
  
                                  <div style="font-size: 12px;color: #8d8b8b;">{{ formatTime(item.time) }}</div>
                              </div>
                              <div>
                                  <div v-show="ThisLoginuuId == item.useruuid && IsMoveThisIndex == index" class="edit"
                                      @click="EditBook(item, index)">
                                      <svg style="width: 16px;height: 16px;" t="1687863077069" class="icon"
                                          viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                                          p-id="29873" width="32" height="32">
                                          <path
                                              d="M946.176 896a34.304 34.304 0 0 1 0 68.608H77.824a34.304 34.304 0 0 1 0-68.608h868.352z m0-622.08L401.92 818.176 189.44 839.68l21.504-211.968 473.088-473.088 71.168-71.168c31.744-31.744 87.552-31.744 119.296 0l71.168 71.168c15.872 15.872 24.576 37.376 24.576 59.904 0.512 22.016-8.192 43.52-24.064 59.392zM266.24 762.88l103.936-10.752 431.616-431.616-93.696-93.696L276.48 658.432 266.24 762.88zM815.104 127.488c-4.096 0-8.192 1.536-11.264 4.608l-46.592 46.592 93.696 93.696 46.592-46.592c6.144-6.144 6.144-16.384 0-22.528l-71.168-71.168c-3.072-3.072-7.168-4.608-11.264-4.608z"
                                              p-id="29874"></path>
                                      </svg>
  
                                  </div>
                              </div>
                          </div>
  
                          <div>
                              <VueMarkdown class="markdown-body" :source="item.content"></VueMarkdown>
                          </div>
  
                          <div style="display: flex;align-items: center;margin-top: 10px;">
                              <svg style="width: 15px;height: 15px;" t="1687884619436" class="icon" viewBox="0 0 1024 1024"
                                  version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9429" width="32" height="32">
                                  <path
                                      d="M512 416a96 96 0 1 1-96 96 96 96 0 0 1 96-96m0-64a160 160 0 1 0 160 160 160 160 0 0 0-160-160z"
                                      fill="#8d8b8b" p-id="9430"></path>
                                  <path
                                      d="M512 298.88c188.64 0 288 113.92 366.72 213.12C800 611.36 700.64 725.12 512 725.12S224 611.36 145.28 512C224 412.64 323.36 298.88 512 298.88m0-64C264.64 234.88 147.52 406.56 64 512c83.52 105.44 200.64 277.12 448 277.12S876.48 617.44 960 512c-83.52-105.44-200.64-277.12-448-277.12z"
                                      fill="#8d8b8b" p-id="9431"></path>
                              </svg>
                              <span style="font-size: 12px;color: #8d8b8b;margin-left: 3px;">浏览{{ item.browsecount }}次</span>
                          </div>
                          <!-- <div style="display: flex;justify-content: space-between;margin-top: 5px;">
                              <span style="font-size: 13px;color: #576b95;">发布于{{ item.provice }}</span>
                          </div> -->
                          <div style="display: flex;justify-content: space-between;margin-bottom: 6px;">
                              <div style="font-size: 13px;color: #8d8b8b;margin: 5px 0;">发布于{{ item.provice }}</div>
  
                              <div style="display: flex;flex-direction: column;">
                                  <div style="display: flex;align-items: center;">
                                      <div style="display: flex;align-items: center;margin-right: 10px;" class="commentbox"
                                          @click="GetComment(item.contentid)">
  
                                          <svg style="width: 16px;height: 16px;" t="1687888312660" class="icon"
                                              viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                                              p-id="10822" width="32" height="32">
                                              <path
                                                  d="M184.32 891.667692c-12.603077 0-25.206154-2.363077-37.809231-7.876923-37.021538-14.966154-59.864615-49.624615-59.864615-89.009231v-275.692307c0-212.676923 173.292308-385.969231 385.969231-385.969231h78.76923c212.676923 0 385.969231 173.292308 385.969231 385.969231 0 169.353846-137.846154 307.2-307.2 307.2H289.083077l-37.021539 37.021538c-18.904615 18.116923-43.323077 28.356923-67.741538 28.356923zM472.615385 195.347692c-178.018462 0-322.953846 144.935385-322.953847 322.953846v275.692308c0 21.267692 15.753846 29.144615 20.48 31.507692 4.726154 2.363077 22.055385 7.876923 37.021539-7.08923l46.473846-46.473846c6.301538-6.301538 14.178462-9.452308 22.055385-9.452308h354.461538c134.695385 0 244.184615-109.489231 244.184616-244.184616 0-178.018462-144.935385-322.953846-322.953847-322.953846H472.615385z"
                                                  fill="#7F7F7F" p-id="10823"></path>
                                              <path
                                                  d="M321.378462 512m-59.076924 0a59.076923 59.076923 0 1 0 118.153847 0 59.076923 59.076923 0 1 0-118.153847 0Z"
                                                  fill="#BFBFBF" p-id="10824"></path>
                                              <path
                                                  d="M518.301538 512m-59.076923 0a59.076923 59.076923 0 1 0 118.153847 0 59.076923 59.076923 0 1 0-118.153847 0Z"
                                                  fill="#BFBFBF" p-id="10825"></path>
                                              <path
                                                  d="M715.224615 512m-59.076923 0a59.076923 59.076923 0 1 0 118.153846 0 59.076923 59.076923 0 1 0-118.153846 0Z"
                                                  fill="#BFBFBF" p-id="10826"></path>
                                          </svg>
  
                                          <span style="margin-left: 3px;font-size: 13px;">{{ item.commentcount }}</span>
                                      </div>
                                      <div class="ilke" style="display: flex;align-items: center;"
                                          @click="ILike(item, index)">
                                          <svg style="width: 16px;height: 16px;fill: #8d8b8b !important;" t="1687860314249"
                                              class="icon" viewBox="0 0 1024 1024" version="1.1"
                                              xmlns="http://www.w3.org/2000/svg" p-id="2315" width="32" height="32">
                                              <path
                                                  d="M857.28 344.992h-264.832c12.576-44.256 18.944-83.584 18.944-118.208 0-78.56-71.808-153.792-140.544-143.808-60.608 8.8-89.536 59.904-89.536 125.536v59.296c0 76.064-58.208 140.928-132.224 148.064l-117.728-0.192A67.36 67.36 0 0 0 64 483.04V872c0 37.216 30.144 67.36 67.36 67.36h652.192a102.72 102.72 0 0 0 100.928-83.584l73.728-388.96a102.72 102.72 0 0 0-100.928-121.824zM128 872V483.04c0-1.856 1.504-3.36 3.36-3.36H208v395.68H131.36A3.36 3.36 0 0 1 128 872z m767.328-417.088l-73.728 388.96a38.72 38.72 0 0 1-38.048 31.488H272V476.864a213.312 213.312 0 0 0 173.312-209.088V208.512c0-37.568 12.064-58.912 34.72-62.176 27.04-3.936 67.36 38.336 67.36 80.48 0 37.312-9.504 84-28.864 139.712a32 32 0 0 0 30.24 42.496h308.512a38.72 38.72 0 0 1 38.048 45.888z"
                                                  p-id="2316"></path>
                                          </svg>
                                          <span style="margin-left: 3px;font-size: 13px;">{{ item.like }}</span>
                                      </div>
                                  </div>
                              </div>
                          </div>
  
                          <div v-show="IsShowMasterComment && IsMovClickThisIndex == item.contentid"
                              style="display: flex;position: relative;">
                              <input placeholder="留下你的精彩评论吧!" @click="MasterInput" v-model="ThisCommentMsg" type="text"
                                  style="outline: none;border: 1px solid #a8a6a6;border-radius: 4px;margin: 0;padding: 4px;margin: 4px 0;width: 100%;height: 14px;font-size: 13px;font-family: Kaiti;">
                              <div style="position: absolute;right: 6px;top: 7px;" class="sendcommit">
                                  <svg @click="ReplyMsg(item, 1, null, null)"
                                      style="width: 18px;height: 18px;fill: #25292c !important;" t="1687921276844"
                                      class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                                      p-id="40922" width="32" height="32">
                                      <path
                                          d="M512 64.383234C264.7878 64.383234 64.383234 264.7878 64.383234 512s200.404567 447.616766 447.616766 447.616766 447.616766-200.404567 447.616766-447.616766S759.2122 64.383234 512 64.383234zM649.153661 476.550387c-14.514842 12.958403-36.414339 11.264-48.914906-3.784303l-50.402874-60.683752 0 287.768527c0 19.858651-15.528623 35.958547-34.684168 35.958547s-34.684168-16.098874-34.684168-35.958547L480.467545 409.174866l-57.516711 64.531417c-13.000303 14.585357-34.942723 15.483657-49.011992 2.005078-14.068248-13.477557-14.933844-36.227321-1.934563-50.812679l106.756599-119.777341c20.609788-23.122778 55.10285-22.477924 74.964567 1.433804l99.077621 119.283737C665.302611 440.886164 663.668503 463.590962 649.153661 476.550387z"
                                          p-id="40923"></path>
                                  </svg>
                              </div>
                          </div>
  
                          <!-- 评论 -->
                          <div v-for="(parentitem, parentindex) in Comments.filter(r => r.level == 1)" :key="parentindex"
                              style="width: 100%;" v-show="IsShowCommentBox && IsMovClickThisIndex == item.contentid"
                              @click="IsShowCommentBox = true" :id="parentitem.commentid" :ref="parentitem.commentid">
  
                              <div style="display: flex;width: 100%;padding: 5px 0">
                                  <img :src="parentitem.userimgurl" alt=""
                                      style="width: 30px;height: 30px;border-radius: 5px;">
                                  <div
                                      style="display: flex;flex-direction: column;margin-left: 5px;font-size: 14px;width: 100%;">
                                      <div style="margin-bottom: 3px;color: #2b2828;font-family: KaiTi;margin-bottom: 3px;">{{
                                          parentitem.username }}</div>
                                      <div style="margin-bottom: 3px;font-size: 15px;margin-bottom: 6px;">{{
                                          parentitem.comment }}</div>
                                      <div style="display: flex;margin-bottom: 3px;">
                                          <span style="font-size: 12px;font-family: Kaiti;color: #8d8b8b;">{{
                                              formatTime(parentitem.time) }}</span>
                                          <span style="font-size: 12px;font-family: Kaiti;color: #8d8b8b;">·{{
                                              parentitem.provice }}</span>
                                      </div>
                                      <div style="display: flex;align-items: center;margin-top: 3px;" class="commentbox">
                                          <div @click="ThisCommentIndex = parentitem.commentid">
                                              <svg style="width: 12px;height: 12px;fill: #8d8b8b !important;" t="1687914841171"
                                              class="icon" viewBox="0 0 1024 1024" version="1.1"
                                              xmlns="http://www.w3.org/2000/svg" p-id="36245" width="32" height="32">
                                              <path
                                                  d="M535.04 896c-61.44 0-373.76-17.92-412.16-20.48-17.92 0-30.72-12.8-35.84-28.16-5.12-15.36 0-33.28 12.8-43.52 2.56-2.56 10.24-7.68 15.36-12.8C176.64 747.52 197.12 727.04 204.8 716.8c-40.96-64-64-138.24-64-215.04 0-112.64 48.64-220.16 130.56-294.4 84.48-74.24 194.56-110.08 307.2-97.28 181.76 20.48 327.68 166.4 348.16 348.16 12.8 112.64-23.04 225.28-97.28 307.2-74.24 81.92-181.76 130.56-294.4 130.56zM225.28 803.84c110.08 5.12 268.8 15.36 309.76 15.36 89.6 0 176.64-38.4 238.08-104.96 61.44-69.12 89.6-156.16 79.36-248.32-17.92-145.92-135.68-263.68-281.6-281.6-92.16-10.24-179.2 17.92-248.32 79.36-66.56 61.44-104.96 145.92-104.96 238.08 0 64 17.92 125.44 53.76 179.2 30.72 40.96-2.56 87.04-46.08 122.88zM128 798.72z"
                                                  p-id="36246"></path>
                                          </svg>
                                          <span style="margin-left: 0px;font-size: 12px;color: #8d8b8b;">回复</span>
                                          </div>
  
                                      <div class="ilke" style="display: flex;align-items: center;margin-left: 12px;"
                                          @click="CommentthisILike(item, 0, parentitem,null)">
                                          <svg style="width: 12px;height: 12px;fill: #8d8b8b !important;" t="1687860314249"
                                              class="icon" viewBox="0 0 1024 1024" version="1.1"
                                              xmlns="http://www.w3.org/2000/svg" p-id="2315" width="32" height="32">
                                              <path
                                                  d="M857.28 344.992h-264.832c12.576-44.256 18.944-83.584 18.944-118.208 0-78.56-71.808-153.792-140.544-143.808-60.608 8.8-89.536 59.904-89.536 125.536v59.296c0 76.064-58.208 140.928-132.224 148.064l-117.728-0.192A67.36 67.36 0 0 0 64 483.04V872c0 37.216 30.144 67.36 67.36 67.36h652.192a102.72 102.72 0 0 0 100.928-83.584l73.728-388.96a102.72 102.72 0 0 0-100.928-121.824zM128 872V483.04c0-1.856 1.504-3.36 3.36-3.36H208v395.68H131.36A3.36 3.36 0 0 1 128 872z m767.328-417.088l-73.728 388.96a38.72 38.72 0 0 1-38.048 31.488H272V476.864a213.312 213.312 0 0 0 173.312-209.088V208.512c0-37.568 12.064-58.912 34.72-62.176 27.04-3.936 67.36 38.336 67.36 80.48 0 37.312-9.504 84-28.864 139.712a32 32 0 0 0 30.24 42.496h308.512a38.72 38.72 0 0 1 38.048 45.888z"
                                                  p-id="2316"></path>
                                          </svg>
                                          <span style="margin-left: 3px;font-size: 12px;color: #8d8b8b;">{{ parentitem.commentlike }}</span>
                                      </div>
  
                                          
                                      </div>
                                      <div v-show="ThisCommentIndex == parentitem.commentid"
                                          style="display: flex;position: relative;">
                                          <input placeholder="留下你的精彩评论吧!" v-model="ThisCommentMsg" type="text"
                                              style="outline: none;border-radius: 4px;font-family: Kaiti;border: 1px solid #a8a6a6;margin: 0;padding: 4px;margin: 4px 0;width: 100%;height: 14px;font-size: 13px;">
                                          <div @click="ReplyMsg(item, 2, parentitem, null)"
                                              style="position: absolute;right: 6px;top: 7px;" class="sendcommit">
                                              <svg style="width: 18px;height: 18px;fill: #25292c !important;"
                                                  t="1687921276844" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                                  xmlns="http://www.w3.org/2000/svg" p-id="40922" width="32" height="32">
                                                  <path
                                                      d="M512 64.383234C264.7878 64.383234 64.383234 264.7878 64.383234 512s200.404567 447.616766 447.616766 447.616766 447.616766-200.404567 447.616766-447.616766S759.2122 64.383234 512 64.383234zM649.153661 476.550387c-14.514842 12.958403-36.414339 11.264-48.914906-3.784303l-50.402874-60.683752 0 287.768527c0 19.858651-15.528623 35.958547-34.684168 35.958547s-34.684168-16.098874-34.684168-35.958547L480.467545 409.174866l-57.516711 64.531417c-13.000303 14.585357-34.942723 15.483657-49.011992 2.005078-14.068248-13.477557-14.933844-36.227321-1.934563-50.812679l106.756599-119.777341c20.609788-23.122778 55.10285-22.477924 74.964567 1.433804l99.077621 119.283737C665.302611 440.886164 663.668503 463.590962 649.153661 476.550387z"
                                                      p-id="40923"></path>
                                              </svg>
                                          </div>
  
                                          
                                      </div>
  
  
                                      <!-- 子级 -->
                                      <div @click="GetSlavecomment(item.contentid, parentitem.commentid)"
                                          v-show="parentitem.slavecommentcount != 0 && SlaveComments.filter(r => FirstParentComment_Start(r.parentid) == parentitem.commentid) == 0"
                                          class="slavecomment" style="margin-left: 0px;font-size: 12px;color: #8d8b8b;display: flex;align-items: center;
                                      padding: 5px 0;">
                                          <span style="">— 展开 {{ parentitem.slavecommentcount }} 条回复 </span>
                                          <svg style="width: 21px;height: 21px;fill: #25292c !important;" t="1687961489059"
                                              class="icon" viewBox="0 0 1024 1024" version="1.1"
                                              xmlns="http://www.w3.org/2000/svg" p-id="12016" width="200" height="200">
                                              <path
                                                  d="M341.333333 426.666667a32 32 0 0 1 45.226667 0l126.72 126.72L640 426.666667a32 32 0 0 1 45.226667 45.226666l-149.333334 149.333334a32 32 0 0 1-45.226666 0L341.333333 471.893333A32 32 0 0 1 341.333333 426.666667z"
                                                  fill="#666666" p-id="12017"></path>
                                          </svg>
                                      </div>
  
                                      <div style="border-radius: 4px;overflow: hidden;font-family: Kaiti;">
                                          <div v-for="(item2, index) in SlaveComments.filter(r => FirstParentComment_Start(r.parentid) == parentitem.commentid)"
                                              :key="index" style="display: flex; background-color: #e4e3e3;width: 100%;padding: 8px;width: 100%;border-radius: 5px;margin: 0;
                                              margin-top: 4px;box-sizing: border-box;" :id="item2.commentid"
                                              :ref="item2.commentid">
                                              <img :src="item2.userimgurl" alt=""
                                                  style="width: 30px;height: 30px;border-radius: 5px;">
                                              <div
                                                  style="display: flex;flex-direction: column;margin-left: 5px;font-size: 14px;width: 100%;">
  
                                                  <div
                                                      style="display: flex;align-items: center;color: #2b2828;font-family: KaiTi;margin-bottom: 3px;">
                                                      <div style="margin-bottom: 3px;">{{ item2.username }}</div>
                                                      <div v-show="RelationUser(FirstParentComment(item2.parentid)) != ''"
                                                          style="display: flex;align-items: center;">
                                                          <span style="margin: 0 4px;font-size: 12px;"> ▶ </span>
                                                          <div style="margin-bottom: 3px;">{{
                                                              RelationUser(FirstParentComment(item2.parentid)) }}
                                                          </div>
                                                      </div>
                                                  </div>
  
                                                  <div style="margin-bottom: 6px;font-size: 15px;">{{ item2.comment }}</div>
                                                  <div style="display: flex;margin-bottom: 3px;color: #8d8b8b;">
                                                      <span style="font-size: 12px;font-family: Kaiti;">{{ item2.provice
                                                      }}</span>
                                                      <span style="font-size: 12px;font-family: Kaiti;">·{{
                                                          formatTime(item2.time) }}</span>
                                                  </div>
                                                  <div style="display: flex;align-items: center;margin-top: 3px;" class="commentbox" >
                                                      <div @click="ThisCommentIndex = item2.commentid">
                                                          <svg style="width: 12px;height: 12px;fill: #8d8b8b !important;"
                                                          t="1687914841171" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                                          xmlns="http://www.w3.org/2000/svg" p-id="36245" width="32"
                                                          height="32">
                                                          <path
                                                              d="M535.04 896c-61.44 0-373.76-17.92-412.16-20.48-17.92 0-30.72-12.8-35.84-28.16-5.12-15.36 0-33.28 12.8-43.52 2.56-2.56 10.24-7.68 15.36-12.8C176.64 747.52 197.12 727.04 204.8 716.8c-40.96-64-64-138.24-64-215.04 0-112.64 48.64-220.16 130.56-294.4 84.48-74.24 194.56-110.08 307.2-97.28 181.76 20.48 327.68 166.4 348.16 348.16 12.8 112.64-23.04 225.28-97.28 307.2-74.24 81.92-181.76 130.56-294.4 130.56zM225.28 803.84c110.08 5.12 268.8 15.36 309.76 15.36 89.6 0 176.64-38.4 238.08-104.96 61.44-69.12 89.6-156.16 79.36-248.32-17.92-145.92-135.68-263.68-281.6-281.6-92.16-10.24-179.2 17.92-248.32 79.36-66.56 61.44-104.96 145.92-104.96 238.08 0 64 17.92 125.44 53.76 179.2 30.72 40.96-2.56 87.04-46.08 122.88zM128 798.72z"
                                                              p-id="36246"></path>
                                                      </svg>
                                                      <span style="margin-left: 0px;font-size: 12px;color: #8d8b8b;">回复</span>
                                                      </div>
  
                                                      <div class="ilke" style="display: flex;align-items: center;margin-left: 12px;"
                                                          @click="CommentthisILike(item, 1, parentitem,item2)">
                                                          <svg style="width: 12px;height: 12px;fill: #8d8b8b !important;" t="1687860314249"
                                                              class="icon" viewBox="0 0 1024 1024" version="1.1"
                                                              xmlns="http://www.w3.org/2000/svg" p-id="2315" width="32" height="32">
                                                              <path
                                                                  d="M857.28 344.992h-264.832c12.576-44.256 18.944-83.584 18.944-118.208 0-78.56-71.808-153.792-140.544-143.808-60.608 8.8-89.536 59.904-89.536 125.536v59.296c0 76.064-58.208 140.928-132.224 148.064l-117.728-0.192A67.36 67.36 0 0 0 64 483.04V872c0 37.216 30.144 67.36 67.36 67.36h652.192a102.72 102.72 0 0 0 100.928-83.584l73.728-388.96a102.72 102.72 0 0 0-100.928-121.824zM128 872V483.04c0-1.856 1.504-3.36 3.36-3.36H208v395.68H131.36A3.36 3.36 0 0 1 128 872z m767.328-417.088l-73.728 388.96a38.72 38.72 0 0 1-38.048 31.488H272V476.864a213.312 213.312 0 0 0 173.312-209.088V208.512c0-37.568 12.064-58.912 34.72-62.176 27.04-3.936 67.36 38.336 67.36 80.48 0 37.312-9.504 84-28.864 139.712a32 32 0 0 0 30.24 42.496h308.512a38.72 38.72 0 0 1 38.048 45.888z"
                                                                  p-id="2316"></path>
                                                          </svg>
                                                          <span style="margin-left: 3px;font-size: 12px;color: #8d8b8b;">{{ item2.commentlike }}</span>
                                                      </div>
                                                  </div>
                                                  <div v-show="ThisCommentIndex == item2.commentid"
                                                      style="display: flex;position: relative;">
                                                      <input placeholder="留下你的精彩评论吧!" v-model="ThisCommentMsg" type="text"
                                                          style="outline: none;border-radius: 4px;font-family: Kaiti;border: 1px solid #a8a6a6;margin: 0;padding: 4px;margin: 4px 0;width: 100%;height: 14px;font-size: 13px;">
  
                                                      <div @click="ReplyMsg(item, 2, parentitem, item2)"
                                                          style="position: absolute;right: 6px;top: 7px;" class="sendcommit">
                                                          <svg style="width: 18px;height: 18px;fill: #25292c !important;"
                                                              t="1687921276844" class="icon" viewBox="0 0 1024 1024"
                                                              version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="40922"
                                                              width="32" height="32">
                                                              <path
                                                                  d="M512 64.383234C264.7878 64.383234 64.383234 264.7878 64.383234 512s200.404567 447.616766 447.616766 447.616766 447.616766-200.404567 447.616766-447.616766S759.2122 64.383234 512 64.383234zM649.153661 476.550387c-14.514842 12.958403-36.414339 11.264-48.914906-3.784303l-50.402874-60.683752 0 287.768527c0 19.858651-15.528623 35.958547-34.684168 35.958547s-34.684168-16.098874-34.684168-35.958547L480.467545 409.174866l-57.516711 64.531417c-13.000303 14.585357-34.942723 15.483657-49.011992 2.005078-14.068248-13.477557-14.933844-36.227321-1.934563-50.812679l106.756599-119.777341c20.609788-23.122778 55.10285-22.477924 74.964567 1.433804l99.077621 119.283737C665.302611 440.886164 663.668503 463.590962 649.153661 476.550387z"
                                                                  p-id="40923"></path>
                                                          </svg>
                                                      </div>
                                                  </div>
  
                                              </div>
                                          </div>
                                      </div>
  
                                  </div>
                              </div>
                          </div>
  
                          <div style="border-bottom: 1px solid #e6e5e5;width: 100%;"></div>
                      </div>
                  </div>
  
              </div>
  
              <div style="width: 100%;text-align: center;color: gray;padding-bottom: 16px;font-size: 13px;">
                  暂无更多...
              </div>
          </div>
  
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import axios from "axios";
  import VueMarkdown from "vue-markdown";
  import hljs from "highlight.js";
  import "highlight.js/styles/github.css";
  
  export default {
      components: {
            VueMarkdown
      },
    data() {
      return {
        Setcontent: false, //侧边栏
        IsBottomOver: false,
        content: '',
              SelectEDITOR: 0,
              JournalData: [],
              ThisLoginuuId: '',
              LoginUserName: "", //用户昵称
              LoginUserImg: "", //用户头像base64
              LoginUserProvice: "", //用户所在省份
              IsShowpreview: false,
              IsShowMain: true,
              IsTop: false,
              IsShowMasterComment: false, //是否显示主评论 输入框
              IsShowCommentBox: false, //是否显示评论
              ThisCommentIndex: '',
              ThisCommentMsg: '',//评论
              Comments: [ 
              ],//评论
              SlaveComments: [], //子评论
              visibleElements: [],
              IsMovClickThisIndex: '', //点击当前评论
              IsMoveThisIndex: 0, //移动当前
              IsPublishOREdit: true, //发布还是编辑
              EditIndex: 0, //编辑当前索引
         
      };
    },
    created() {
      this.ThisLoginuuId = localStorage.getItem("cacheLoginuuid")
      let loginUserName = localStorage.getItem("cacheLoginUserName");
          if (loginUserName != null && loginUserName != "") {
          this.LoginUserName = loginUserName;
          this.IsShowLoginDiv = false;
          } else {
          this.IsShowLoginDiv = true;
          }
  
          let loginUserImg = localStorage.getItem("cacheLoginUserImg");
          if (loginUserImg != null && loginUserImg != "") {
          this.LoginUserImg = loginUserImg;
          }
          
      window.addEventListener("onmessageWS", this.getsocketData); //监听webscoket消息
  
      },
      async mounted() {
          await this.GetData()
          
  
          
  
          this.Codeformat();
      },
      updated() {
  
      },
    methods: {
          async getsocketData(e) {
  
              var objmsg = JSON.parse(e.detail.data);
              if(objmsg.MsgType == 99)
              {
                  objmsg.Data.forEach(r=>{
                      r.userName = r.userName == localStorage.getItem('cacheLoginUserName') ?'我':r.userName
                  })
                  
                 let thisuser = objmsg.Data.filter(r=>r.useruuid == this.ThisLoginuuId)
                 
                 if(thisuser.length > 0)
                 {
                  this.LoginUserProvice =thisuser[0].provice
                   
                 }
              }
          },
          async GetData() {
             await new Promise((a,b)=>{
                  axios.get(this.$BaseUrl + '/api/ChatGPT/Get?useruuid='+this.ThisLoginuuId).then(res => {
                      this.JournalData = res.data.data
                      this.Codeformat();
                      a(res.data.data)
                      }).catch(error => {
  
                      console.log(error);
                      });
              })
          },
          MasterInput() //首个文本框点击事件
          {
              this.IsShowMasterComment = true
              this.IsShowCommentBox = true
          },
          async GetComment(contentid) //获取评论
          {
              this.IsMovClickThisIndex = contentid
              this.IsShowMasterComment = true
              this.IsShowCommentBox = true
  
              this.Comments = []
              await new Promise((a, b) => {
                  axios.get(this.$BaseUrl + `/api/ChatGPT/GetMasterComment?contentid=${contentid}`).then(res => {
  
                      this.Comments = res.data.data
                      console.log(this.Comments);
  
                      a(res.data.data)
                  }).catch(error => {
                      b(error)
                      console.log(error);
                  });
              })
          },
          async GetSlavecomment(contentid, parentcommentid) {
  
  
              this.IsMovClickThisIndex = contentid
              this.IsShowMasterComment = true
              this.IsShowCommentBox = true
  
              this.SlaveComments = []
  
              await new Promise((a, b) => {
                  axios.get(this.$BaseUrl + `/api/ChatGPT/GetSlaveComment?contentid=${contentid}&commentparentid=${parentcommentid}`)
                      .then(res => {
  
                          this.SlaveComments = res.data.data
                          console.log('SlaveComments', this.SlaveComments);
                          a(res.data.data)
  
                      }).catch(error => {
                          b(error)
                          console.log(error);
                      });
              })
          },
          ReplyMsg(journal, level, parentcomment, comment) {
  
              let mastercommentindex = 0
              if(parentcomment != null)
              {
                  mastercommentindex = parentcomment.listindex //主评论索引
              }
  
              let Journalid = journal.contentid
  
              console.log('Journalid', Journalid);
  
              let receiveuuids = ''
              let receivenames = ''
              let receiveuserimgs = ''
  
              receiveuuids = journal.useruuid
              receivenames = journal.username
              receiveuserimgs = journal.userimgurl
  
              let pushcommentid = '' //当前评论id
  
              let pushcomment = '' //回复的评论
  
              let req = {}
  
              if (level == 1) {
                  //req.commentid = comment.commentid
                  req.comment = this.ThisCommentMsg
                  req.username = localStorage.getItem('cacheLoginUserName')
                  req.userimgurl = localStorage.getItem("cacheLoginUserImg")
                  req.useruuid = localStorage.getItem("cacheLoginuuid")
                  //req.time = comment.time
                  req.parentid = '0'
                  req.level = 1
  
  
                  pushcommentid = journal.contentid //第一次评论（没有评论id，为文章ID）
  
                  //顶级输入框
                  this.IsShowCommentBox = true
              }
              else {
                  //req.commentid = comment.commentid
                  req.comment = this.ThisCommentMsg
                  req.username = localStorage.getItem('cacheLoginUserName')
                  req.userimgurl = localStorage.getItem("cacheLoginUserImg")
                  req.useruuid = localStorage.getItem("cacheLoginuuid")
                  //req.time = comment.time
                  if (parentcomment != null && comment != null) {
                      req.parentid = parentcomment.commentid + ',' + comment.commentid
  
                      receiveuuids += ',' + parentcomment.useruuid + ',' + comment.useruuid
                      receivenames += ',' + parentcomment.username + ',' + comment.username
                      receiveuserimgs += ',' + parentcomment.userimgurl + ',' + comment.userimgurl
  
                      pushcommentid = parentcomment.commentid + ',' + comment.commentid //评论id
  
                      pushcomment = comment.comment //回复引用的评论
                  }
                  else if (parentcomment != null) {
                      req.parentid = parentcomment.commentid
  
                      receiveuuids += ',' + parentcomment.useruuid
                      receivenames += ',' + parentcomment.username
                      receiveuserimgs += ',' + parentcomment.userimgurl
  
                      pushcommentid = parentcomment.commentid //评论id
  
                      pushcomment = parentcomment.comment //回复引用的评论
                  }
                  // else if (comment != null) {
  
                  //     req.parentid = comment.commentid
                  //     receiveuuids +=','+  comment.useruuid
                  //     receivenames +=','+  comment.username
                  //     receiveuserimgs +=','+  comment.userimgurl
                  // }
  
                  req.level = level
  
              }
  
              console.log('pushcommentid', pushcommentid);
  
  
              axios.post(this.$BaseUrl + '/api/ChatGPT/AddComment', { contentid: Journalid, masterindex: mastercommentindex, comment: req }).then(res => {
  
                  let newpushcommentid = res.data.data
                  pushcommentid += ',' + newpushcommentid
                  console.log('newpushcommentid', newpushcommentid);
  
                  this.$emit('child-Tips', '发表成功!');
  
  
  
                  journal.commentcount += 1
  
                  if (level == 1) {
                      axios.get(this.$BaseUrl + `/api/ChatGPT/GetMasterComment?contentid=${journal.contentid}`).then(res => {
                          this.Comments = res.data.data
                      }).catch(error => {
                          console.error(error);
                      });
                  }
                  else {
                      axios.get(this.$BaseUrl + `/api/ChatGPT/GetSlaveComment?contentid=${journal.contentid}&commentparentid=${parentcomment.commentid}`).then(res => {
                          this.SlaveComments = res.data.data
                      }).catch(error => {
  
                          console.log(error);
                      });
                  }
  
  
                  const uniquereceiveuuids = Array.from(new Set(receiveuuids.split(',')));
  
  
                  let sigreceiveName = ''  //进行中评论
                  let sigreceiveuseruuid = uniquereceiveuuids.length == 1 ? uniquereceiveuuids[0] :
                      uniquereceiveuuids.length == 2 ? uniquereceiveuuids[1] : uniquereceiveuuids[2]
                  let comments = this.Comments.filter(r => r.useruuid == sigreceiveuseruuid)
                  if (comments.length != 0) {
                      sigreceiveName = comments[0].username
                  }
                  else {
                      let slaveComments = this.SlaveComments.filter(r => r.useruuid == sigreceiveuseruuid)
                      if (slaveComments.length != 0) {
                          sigreceiveName = slaveComments[0].username
                      }
                      else {
                          sigreceiveName = ''
                      }
                  }
  
  
  
  
                  //发送通知
                  // console.log('this.Comments', this.Comments);
                  // console.log('receiveuuids', receiveuuids);
                  // console.log('receivenames', receivenames);
                  // console.log('receiveuserimgs', receiveuserimgs);
  
  
                  for (let i = 0; i < uniquereceiveuuids.length; i++) {
  
                      if (uniquereceiveuuids[i] == localStorage.getItem("cacheLoginuuid")) {
                          continue;
                      }
  
  
                      //发生消息通知
                      var sendobj = {
                          msgs: this.ThisCommentMsg,
                          msgType: 12,
                          sendName: localStorage.getItem('cacheLoginUserName'),
                          receiveName: sigreceiveName,
                          contentid: journal.contentid,
                          commentid: pushcommentid,
                          comment:pushcomment,
                          noticetype:1,
                          level: level,
                          content: "帖子：" + journal.content,
                          imgUrl: localStorage.getItem("cacheLoginUserImg"),
                          senduuid: localStorage.getItem("cacheLoginuuid"),
                          receiveuuid: uniquereceiveuuids[i],
                          ismy: true,
                          sendTime: "",
                      };
  
                      this.MyWebSockeSend(sendobj); //发送消息
                  }
                  this.ThisCommentMsg = ''
  
              }).catch(error => {
  
                  console.error(error);
              });
  
  
          },
          Global()  //全局控制
          {
              this.IsShowMasterComment = false
              this.IsShowCommentBox = false
          },
          ILike(item, index) {
  
              axios.get(this.$BaseUrl + `/api/ChatGPT/Ilike?contentid=${item.contentid}`).then(res => {
  
                  item.like += 1
                  this.$emit('child-Tips', '点赞成功!');
  
                  //发生消息通知
                  var sendobj = {
                      msgs: '赞了你的作品❤',
                      noticetype:0,
                      msgType: 12,
                      level:1,
                      comment:'',
                      sendName: localStorage.getItem('cacheLoginUserName'),
                      receiveName: '',
                      contentid: item.contentid,
                      content: "帖子：" + item.content,
                      imgUrl: localStorage.getItem("cacheLoginUserImg"),
                      senduuid: localStorage.getItem("cacheLoginuuid"),
                      receiveuuid: item.useruuid,
                      ismy: true,
                      sendTime: "",
                  };
  
                  this.MyWebSockeSend(sendobj); //发送消息
  
              }).catch(error => {
  
                  console.log(error);
              });
          },
          CommentthisILike(journal, flag, parentcomment,slavecomment) //评论点赞
          {
  
          let receiveuuids = ''
          
          let pushcomment = '' //回复的评论
  
          let pushcommentid = '' //当前评论id
  
          receiveuuids = journal.useruuid
  
          let req = 
          {
              contentid:journal.contentid,
              masterlistindex:parentcomment.listindex,
              mastercommentid:parentcomment.commentid,
              flag:flag
          }
          if(flag == 1)
          {
              req.slavelistindex = slavecomment.listindex
          }
  
          axios.post(this.$BaseUrl + `/api/ChatGPT/CommentthisILike`,req).then(res => {
  
          if(flag == 0)
          {
              parentcomment.commentlike +=1
              receiveuuids += ',' + parentcomment.useruuid
              pushcommentid = parentcomment.commentid //评论id
  
              pushcomment = parentcomment.comment //回复引用的评论
          }
          else
          {
              slavecomment.commentlike +=1
              receiveuuids += ',' + parentcomment.useruuid + ',' + slavecomment.useruuid
              pushcommentid = parentcomment.commentid + ',' + slavecomment.commentid //评论id
  
              pushcomment = slavecomment.comment //回复引用的评论
          }
  
          const uniquereceiveuuids = Array.from(new Set(receiveuuids.split(',')));
  
  
              let sigreceiveName = ''  //进行中评论
              let sigreceiveuseruuid = uniquereceiveuuids.length == 1 ? uniquereceiveuuids[0] :
                  uniquereceiveuuids.length == 2 ? uniquereceiveuuids[1] : uniquereceiveuuids[2]
              let comments = this.Comments.filter(r => r.useruuid == sigreceiveuseruuid)
              if (comments.length != 0) {
                  sigreceiveName = comments[0].username
              }
              else {
                  let slaveComments = this.SlaveComments.filter(r => r.useruuid == sigreceiveuseruuid)
                  if (slaveComments.length != 0) {
                      sigreceiveName = slaveComments[0].username
                  }
                  else {
                      sigreceiveName = ''
                  }
              }
  
  
          this.$emit('child-Tips', '点赞成功!');
  
          for (let i = 0; i < uniquereceiveuuids.length; i++) {
  
          if (uniquereceiveuuids[i] == localStorage.getItem("cacheLoginuuid")) {
              continue;
          }
  
  
          console.log('uniquereceiveuuids',uniquereceiveuuids);
          //发生消息通知
          var sendobj = {
              msgs: '赞了你的评论❤',
              msgType: 12,
              sendName: localStorage.getItem('cacheLoginUserName'),
              receiveName: sigreceiveName,
              contentid: journal.contentid,
              commentid: pushcommentid,
              comment:pushcomment,
              noticetype:0,
              level:2,
              content: "帖子：" + journal.content,
              imgUrl: localStorage.getItem("cacheLoginUserImg"),
              senduuid: localStorage.getItem("cacheLoginuuid"),
              receiveuuid: uniquereceiveuuids[i],
              ismy: true,
              sendTime: "",
          };
  
          this.MyWebSockeSend(sendobj); //发送消息
          }
  
  
          }).catch(error => {
  
          console.log(error);
          });
          },
          Codeformat() {
        //代码高亮显示
        this.$nextTick(() => {
          const blocks = this.$el.querySelectorAll("pre code");
          Array.from(blocks).forEach((block) => {
            hljs.highlightBlock(block);
            // 查找同级元素
            const sibling = block.parentNode.querySelectorAll(".copy-btn");
  
            if (sibling.length < 1) {
              const button = document.createElement("span");
              button.textContent = "";
              button.classList.add("copy-btn");
              block.parentNode.insertBefore(button, block.nextSibling);
              button.addEventListener("click", (event) => {
                // 获取要复制的数据
  
                //提示
                this.Tips("复制成功！");
  
                const data = block.textContent.trim();
                //const data = 'Hello, world!'
                this.$copyText(data).then(
                  function () {
                    //console.log('Copied:', data)
                  },
                  function () {
                    //console.error('Copy failed:', data)
                  }
                );
              });
            }
          });
  
          const pres = this.$el.querySelectorAll("pre");
          Array.from(pres).forEach((pre) => {
            //移入事件
            pre.addEventListener("mouseover", (event) => {
              const blocks2 = event.target.querySelectorAll("pre code");
              Array.from(blocks2).forEach((block2) => {
                const copybtns = block2.parentNode.querySelectorAll(".copy-btn");
                Array.from(copybtns).forEach((copybtn) => {
                  copybtn.textContent = "copy";
                });
              });
            });
  
            //移出事件
            pre.addEventListener("mouseleave", (event) => {
              const blocks2 = this.$el.querySelectorAll("pre code");
              Array.from(blocks2).forEach((block2) => {
                const copybtns = block2.parentNode.querySelectorAll(".copy-btn");
                Array.from(copybtns).forEach((copybtn) => {
                  copybtn.textContent = "";
                });
              });
            });
          });
        });
      },
      Tips(title) {
        const bubbleWrapper = document.createElement("div");
        bubbleWrapper.classList.add("bubble-wrapper");
        document.body.appendChild(bubbleWrapper);
        const bubble = document.createElement("div");
        bubble.classList.add("bubble");
        bubble.innerHTML = title;
        bubbleWrapper.appendChild(bubble);
        setTimeout(function () {
          bubbleWrapper.remove();
        }, 1400);
      },
      formatTime(time) {
              const now = new Date();
              const target = new Date(time);
              const diff = now.getTime() - target.getTime();
              const hour = target.getHours();
              let minute = target.getMinutes();
              const day = target.getDate();
              const week = target.getDay();
  
              if (minute < 10) {
                  minute = "0" + minute;
              }
  
              if (diff < 0) {
                  // 未来时间
                  return target.toLocaleString();
              }
  
              if (diff < 60 * 1000) {
                  // 一分钟内
                  return "刚刚";
              }
  
              if (diff < 60 * 60 * 1000) {
                  // 一小时内
                  return `${Math.floor(diff / (60 * 1000))}分钟前`;
              }
  
              if (diff < 24 * 60 * 60 * 1000) {
                  // 一天内
                  if (hour < 12) {
                      return `上午 ${hour}:${minute}`;
                  } else if (hour < 18) {
                      return `下午 ${hour - 12}:${minute}`;
                  } else {
                      return `晚上 ${hour - 12}:${minute}`;
                  }
              }
  
              if (diff < 2 * 24 * 60 * 60 * 1000) {
                  // 昨天
                  return `昨天 ${hour}:${minute}`;
              }
  
              if (diff < 7 * 24 * 60 * 60 * 1000) {
                  // 一周内
                  const weeks = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
                  return `${weeks[week]} ${hour}:${minute}`;
              }
  
              if (now.getFullYear() === target.getFullYear()) {
                  // 同一年
                  return `${target.getMonth() + 1}月${day}日 ${hour}:${minute}`;
              } else {
                  return `${target.getFullYear()}年${target.getMonth() + 1
                      }月${day}日 ${hour}:${minute}`;
              }
          },
  
      KKs(r) {
        let mytopimgHeight = this.$refs.mytopimg.offsetHeight;
        let usercontentHeight = this.$refs.usercontent.offsetHeight;
        if (r.srcElement.scrollTop > mytopimgHeight + usercontentHeight) {
          this.IsBottomOver = true;
        } else {
          this.IsBottomOver = false;
        }
      },
      setShow() {
        this.Setcontent = true;
      },
      setHide() {
        this.Setcontent = false;
      },
       
       
    },
  };
  </script>
  
  <style scoped  >
  .base {
    width: 100%;
    height: 100vh;
    overflow: auto;
    scrollbar-width: none;
  }
  .base::-webkit-scrollbar {
    width: 0px;
  }
  
  .base::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #c3c4c6;
    /*滚动条颜色*/
  }
  .base::-webkit-scrollbar-track {
  }
  .content {
     
    width: 100%;
    display: flex;
    flex-direction: column;
  }
  
  .mytopimg {
    height: 190px;
    background-color: #007aff;
    border-radius: 5px;
  }
  .bgcimg {
    width: 100%;
    height: 100%;
    border-radius: 5px;
  }
  
  .myuserImg {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    position: absolute;
    top: -42px;
    right: 30px;
    z-index: 9999;
  }
  
  .mybottom {
    position: relative;
    flex: 1;
    z-index: 2;
    width: 100%;
    background-color: #f5f5f5;
  }
  
  .myset {
    color: #fcfffd;
    position: absolute;
    top: 25px;
    right: 16px;
    z-index: 999;
    width: 40px;
    font-size: 23px;
    display: flex;
    align-content: center;
    justify-content: center;
  }
  
  .usercontent {
    height: 53px;
    padding-top: 13px;
    display: flex;
    flex-direction: column;
    padding-right: 5px;
  }
  
  .usercontenttop {
    color: #fcfffd;
    display: flex;
    height: 25px;
    justify-content: flex-end;
    align-items: center;
  }
  
  .usercontenttop_name {
    font-size: 20px;
    font-weight: 600;
    line-height: 25px;
  }
  
  .usercontenttop_Edit {
    padding: 0 5px;
    margin-right: 8px;
    height: 20px;
    line-height: 20px;
    border-radius: 15px;
    font-size: 12px;
    margin-left: 5px;
    background-color: #292735;
  }
  
  .usercontentmit {
    margin: 2px 0;
    height: 22px;
    color: #23212f;
    font-size: 12px;
    display: flex;
    justify-content: flex-end;
    line-height: 22px;
  }
  
  .usercontentbottom {
    display: flex;
    height: 26px;
    justify-content: flex-end;
  }
  
  .usercontentbottom_numId {
    padding: 0 5px;
    color: #fcfffd;
    font-size: 12px;
    border-radius: 16px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    background-color: #3e3f44;
    margin-left: 8px;
  }
  
  .usercontentbottom_Age {
    padding: 0 5px;
    color: #23212f;
    font-size: 12px;
    border-radius: 16px;
    height: 20px;
    line-height: 20px;
    background-color: #e6e5e5;
    margin-left: 8px;
  }
  
  .fenlei {
    color: #ffffff;
    width: 100%;
    background-color: #e6e5e5;
    padding-left: 18px;
    font-size: 13px;
    height: 1px;
    line-height: 22px;
    box-sizing: border-box;
  }
  
  .lineset {
    width: 100%;
    
    box-sizing: border-box;
    font-size: 16px;
    font-weight: 600;
    color: #23212f;
    padding-left: 18px;
    display: flex;
    justify-content: flex-end;
    margin: 0;
    padding: 5px 0;
    padding-right: 5px;
  }
  
  .setcontent {
    width: 70%;
    height: 100vh;
    background-color: #e6e5e5;
    position: absolute;
    z-index: 9988;
    right: 0;
    transition: all 0.3s;
  }
  
  .SetHidecss {
    padding-top: 0;
    width: 0;
    z-index: -1;
    height: 100vh;
    top: 0;
    right: 0;
    position: absolute;
    transition: all 0.3s;
  }
  
  .setitem {
    width: 100%;
    height: 40px;
    background-color: #c3c4c6;
    text-align: left;
    line-height: 40px;
    font-size: 16px;
    font-weight: 600;
    color: #151615;
    padding-left: 18px;
    margin: 15px 0;
  }
  
  .setHideitem {
    display: none;
  }
  
  .TopTopOver {
    color: #151615;
    position: absolute;
    background-color: #c3c4c6;
    width: 100%;
    z-index: 999900;
    height: 40px;
    text-align: center;
    line-height: 40px;
    font-size: 18px;
  }
  
  .TopTopOver img {
    margin-right: 5px;
    margin-bottom: 5px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    vertical-align: middle;
  }
  
  /* 说说 */
  .shuoshuoAll {
    height: 1600px;
    width: 100%;
    /* padding: 14px; */
    box-sizing: border-box;
  }
  
  .shuo_img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
  }
  
  .shuoIMGAllAndSig {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  
  .shuoIMGAllAndSig::after {
    content: "  ";
    width: 220rpx;
    height: 220rpx;
    border-radius: 6px;
  }
  </style>
  